feat(premium-analytics): port components package from next-woocommerce-analytics by chihsuan · Pull Request #49360 · Automattic/jetpack

chihsuan · 2026-06-03T06:58:22Z

Proposed changes

First UI leaf in M2 — Shared Packages Integration: port @next-woo-analytics/components into @automattic/jetpack-premium-analytics as the internal ui package. Provides the date-filtering UI consumed by analytics widgets — the date-range popover (calendar + presets + manual inputs), the comparison dropdown, and the DateFiltersPanel container that ties them together — plus the SCSS and Storybook stories for all of it. This is the first ported package that ships React components and styles.

Commits

Reviewed most easily commit-by-commit — commit 1 is a byte-identical copy of upstream (including the three stories), so every later diff shows exactly what the monorepo port changed.

Commit	Subject	What to review
`604a8c1334`	feat(premium-analytics): add ui package from next-woocommerce-analytics components	Nothing line-by-line — verbatim upstream copy (verified byte-identical), only the dir is renamed `components` → `ui`
`4becf55eb3`	refactor(premium-analytics): adapt ui package imports and manifest for monorepo	Mechanical: specifier/text-domain renames, manifest conventions, story titles/types, leaf tsconfig deletion
`e14415029a`	refactor(premium-analytics): decouple ui package from admin-toolkit unlock	Semantic — the local `unlock` helper and dep swap
`78eb626d7f`	refactor(premium-analytics): cast comparison presets passed to DateRangePresets	Semantic — one-call-site cast for the repo's stricter `tsgo`
`f4114732d4`	refactor(premium-analytics): use current wpds typography token names	Semantic — 3 token renames (`--wpds-font-` → `--wpds-typography-`)
`2c0fc06968`	refactor(premium-analytics): extract story render hooks into named components	Semantic — `rules-of-hooks` fix in the three stories
`cd23fb79ab`	style(premium-analytics): align ported ui package with jetpack formatting	Mechanical: pure prettier + eslint/stylelint autofix output
`a414d088bc`	chore(premium-analytics): wire ui package deps and relax lint for the port	Parent `package.json`/`eslint.config.mjs`/lockfile + changelog
`ce8c516591`	feat(storybook): resolve @jetpack-premium-analytics imports in vite	Small: one Vite alias in the monorepo Storybook + changelog

Monorepo adaptations

Upstream	Here	Why
dir `packages/components`	dir `packages/ui`	`@wordpress/build` hard-codes an Emotion Babel pass for any package directory literally named `components` (`needsEmotionPlugin = packageName === 'components'`), which runs Babel without a TypeScript preset and breaks TS transpilation. These components use SCSS, not Emotion, so the pass is incidental — naming the dir `ui` lets esbuild transpile the TS natively with no extra Babel tooling
`name: @next-woo-analytics/components`	`name: @automattic/jetpack-premium-analytics-ui`	Internal-packages convention; the import specifier is `@jetpack-premium-analytics/ui` (from the tsconfig path alias), separate from the `name:` field
`… from '@next-woo-analytics/datetime'` (11 imports)	`… from '@jetpack-premium-analytics/datetime'`	Consume the integrated datetime package
`… from '@wc-analytics/formatters'`	`… from '@jetpack-premium-analytics/formatters'`	Consume the integrated formatters package (only `formatDate` + `formatDateRange` are used)
`import { unlock } from '@automattic/admin-toolkit'` (4 files incl. one story)	local `src/lock/unlock.ts` via `@wordpress/private-apis`	`admin-toolkit` isn't available here. The helper opts in with `__dangerousOptInToUnstableAPIsOnlyForCoreModules` to reach the private `Menu` of `@wordpress/components` — mirrors existing Jetpack precedent (`jetpack-mu-wpcom` `getUnlock`, `js-packages/charts` stories)
`@next-woo-analytics/data`, `@automattic/design-system` in `dependencies`	dropped	Declared upstream but imported nowhere in the components source (verified by grep)
`@wordpress/i18n`, `react` undeclared	declared	Both are imported by the source; upstream relied on hoisting
`date-fns` in `dependencies`	`devDependencies`	Only the stories import it
`--wpds-font-size-`, `--wpds-font-line-height-` tokens	`--wpds-typography-font-size-`, `--wpds-typography-line-height-`	The design-system version shipped with the repo's `@wordpress/ui` renamed the font tokens; the upstream names resolve to nothing here
`'woocommerce-analytics'` text domain	`'jetpack-premium-analytics'`	Matches the package's text domain
Leaf `tsconfig.json`	(deleted)	Parent already `includes: [packages/*/]` and supplies the `@jetpack-premium-analytics/*` path alias; mirrors `packages/datetime` / `packages/formatters`
`*` version specs	pinned (`@automattic/ui 1.0.2`, `@wordpress/components 33.1.0`, `@wordpress/compose 7.46.0`, `@wordpress/ui 0.13.0`, `@wordpress/private-apis 1.46.0`, `clsx 2.1.1`)	Jetpack convention; versions match siblings
Upstream prettier/import-order style	re-run through Jetpack ESLint + prettier	Aligns the port with monorepo formatting (isolated in the `style:` commit)

One small TS adaptation worth flagging (own commit, 78eb626d7f): DateComparisonDropdown reuses DateRangePresets (typed for primary presets) to render comparison presets. Upstream's looser tsc allowed it; the repo's tsgo does not, so the two props are cast at that one call site with a comment — the component only reads id/label/range to render, so the runtime shape matches.

Parent-level wiring (projects/packages/premium-analytics/):

package.json: adds the real runtime deps imported by the components (@automattic/ui, @wordpress/components, @wordpress/compose, @wordpress/private-apis, @wordpress/ui, clsx; @wordpress/icons / date-fns already present), plus @wordpress/base-styles (dev) so the SCSS @use "@wordpress/base-styles/…" resolves at build time. The leaf isn't a pnpm workspace member (the root glob doesn't reach two levels in), so the parent's deps are the load-bearing ones. No link: dependency is added yet — nothing imports ui (same as datetime/formatters); the first consumer will add it.
eslint.config.mjs (temporary): adds a packages/ui/**-scoped block (the datetime/formatters blocks are untouched) softening the JSDoc rules and relaxing react/jsx-no-bind so the upstream inline-handler JSX style lands as-is. Tracked for follow-up alongside datetime/formatters.

Build / SCSS

pnpm build (wp-build) transpiles every internal package; ui now transpiles cleanly and its SCSS compiles — @use "@wordpress/base-styles/colors" resolves ($gray-300 → #ddd), --wpds-* tokens and class names are emitted, and the compiled CSS is inlined into the per-component output as a runtime style injection. Like datetime/formatters, the package is a library (not a build target), so it only lands in build/ once a route imports it; building it standalone confirms the JS and styles compile.

Storybook

The three upstream stories live in packages/components/src/*/stories/ and are copied verbatim in the first commit, then adapted in the same commits as the rest of the port:

Mechanical (4becf55eb3): @storybook/react-vite types → @storybook/react; titles follow the icons convention (Packages/Premium Analytics/UI/<Component>); @storybook/react + date-fns added to the leaf devDependencies (story-only imports, mirroring the icons package — no lockfile change, leaves aren't pnpm importers).
Unlock (e14415029a): the presets story's unlock comes from the local src/lock/unlock.ts helper, as in the components themselves.
Semantic (2c0fc06968): inline render: bodies that call hooks are extracted into named *WithState components — upstream's pattern fails the repo's react-hooks/rules-of-hooks.

The monorepo Storybook already picks up premium-analytics/packages stories (same glob the icons package uses). One storybook-project change was needed (ce8c516591): Storybook's vite had no resolution for the @jetpack-premium-analytics/* internal-package specifier — the tsconfig path alias only covers types and wp-build only covers the plugin build (the icons stories worked only because they have no cross-package imports). projects/js-packages/storybook/storybook/main.js now aliases @jetpack-premium-analytics to projects/packages/premium-analytics/packages, mirroring wp-build's mapping — each leaf's main points at its TS source. Changelog entry included.

Verified in storybook:dev: all stories under Packages/Premium Analytics/UI render with SCSS applied (popover calendar + presets + manual inputs, comparison dropdown, presets menu), and the autodocs pages load with no console errors.

What's intentionally not here

No wpModule: true / script-module build wiring — upstream declares wpModule: true, but adding the @wordpress/build equivalent here breaks pnpm build: the @jetpack-premium-analytics/* specifier is a tsconfig-paths-only alias, not Node-resolvable (the leaves aren't pnpm workspace members). Same deferral as the datetime/formatters ports; revisit when the leaves become resolvable packages.
No @automattic/admin-toolkit — replaced by the local unlock helper.
No @next-woo-analytics/data / @automattic/design-system — declared upstream, imported nowhere.
No link: dependency on the parent — ui isn't imported anywhere yet, so wiring it into the build is deferred to the first consumer (mirrors datetime/formatters).
No JSDoc backfill / formatting cleanup of upstream patterns — out of scope; tracked by the temporary eslint.config.mjs comments.

Does this pull request change what data or activity we track or use?

No.

Testing instructions

Requires Node 24 (repo engineStrict).

pnpm install
cd projects/packages/premium-analytics
pnpm typecheck                        # tsgo --noEmit — 0 errors
pnpm exec eslint . --max-warnings=0   # clean, incl. the datetime/formatters siblings
pnpm build                            # wp-build — passes; ui transpiles + SCSS compiles
pnpm run storybook                    # open "Packages/Premium Analytics/UI" — all three components render

# http://localhost:50240/?path=/docs/packages-premium-analytics-ui-datecomparisondropdown--docs

github-actions · 2026-06-03T06:59:07Z

Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.

To test on WoA, go to the Plugins menu on a WoA dev site. Click on the "Upload" button and follow the upgrade flow to be able to upload, install, and activate the Jetpack Beta plugin. Once the plugin is active, go to Jetpack > Jetpack Beta, select your plugin (Jetpack or WordPress.com Site Helper), and enable the wooa7s-1318-integrate-components-package-into-analytics branch.
To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack wooa7s-1318-integrate-components-package-into-analytics

bin/jetpack-downloader test jetpack-mu-wpcom-plugin wooa7s-1318-integrate-components-package-into-analytics

Interested in more tips and information?

In your local development environment, use the jetpack rsync command to sync your changes to a WoA dev blog.
Read more about our development workflow here: PCYsg-eg0-p2
Figure out when your changes will be shipped to customers here: PCYsg-eg5-p2

github-actions · 2026-06-03T06:59:26Z

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

✅ Include a description of your PR changes.
✅ Add a "[Status]" label (In Progress, Needs Review, ...).
✅ Add testing instructions.
✅ Specify whether this PR includes any changes to data or privacy.
✅ Add changelog entries to affected projects

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

Follow this PR Review Process:

Ensure all required checks appearing at the bottom of this PR are passing.
Make sure to test your changes on all platforms that it applies to. You're responsible for the quality of the code you ship.
You can use GitHub's Reviewers functionality to request a review.
When it's reviewed and merged, you will be pinged in Slack to deploy the changes to WordPress.com simple once the build is done.

If you have questions about anything, reach out in #jetpack-developers for guidance!

jp-launch-control · 2026-06-03T07:17:56Z

Code Coverage Summary

This PR did not change code coverage!

That could be good or bad, depending on the situation. Everything covered before, and still is? Great! Nothing was covered before? Not so great. 🤷

Full summary · PHP report · JS report

…cs components Verbatim copy of packages/components from next-woocommerce-analytics (source, SCSS, stories, manifest, tsconfig), with only the directory renamed components -> ui: @wordpress/build hard-codes an Emotion Babel pass for any package directory literally named "components", which breaks TS transpilation; these components use SCSS, not Emotion. No content changes - later commits adapt the package to the monorepo.

…r monorepo Mechanical port adaptations, no behavior changes: - Import specifiers: @next-woo-analytics/datetime -> @jetpack-premium-analytics/datetime, @wc-analytics/formatters -> @jetpack-premium-analytics/formatters - Text domain: woocommerce-analytics -> jetpack-premium-analytics - Manifest: internal-packages name/private/types conventions, pinned versions matching siblings, drop @next-woo-analytics/data and @automattic/design-system (declared upstream, imported nowhere), declare @wordpress/i18n and react (imported but undeclared upstream), move date-fns to devDependencies (story-only import), add @storybook/react for the stories - Drop upstream wpModule/exports build fields: main/types point at the TS source like the sibling internal packages; the script-module build is deferred until the leaves are Node-resolvable - Stories: @storybook/react-vite types -> @storybook/react, titles follow the monorepo convention (Packages/Premium Analytics/UI/<Component>) - Delete leaf tsconfig.json: the parent tsconfig already includes packages/**/* and supplies the @jetpack-premium-analytics/* path alias (mirrors packages/datetime and packages/formatters)

…nlock @automattic/admin-toolkit is not available in this monorepo. Replace its unlock with a local src/lock/unlock.ts that opts in to @wordpress/private-apis directly, mirroring existing Jetpack precedent (jetpack-mu-wpcom getUnlock(), js-packages/charts stories). Swap the manifest dependency accordingly. The typed local helper also makes upstream's @typescript-eslint/no-unsafe-assignment disables unused (the repo lints unused disable directives), so drop them at the three unlock call sites.

…ngePresets DateComparisonDropdown reuses DateRangePresets (typed for primary presets) to render comparison presets. Upstream's looser tsc allowed the mismatch; the repo's tsgo does not. Cast the two props at the one call site - the component only reads id/label/range to render, so the runtime shape matches.

The design-system version shipped with the repo's @wordpress/ui renamed the font tokens: --wpds-font-size-* -> --wpds-typography-font-size-* and --wpds-font-line-height-* -> --wpds-typography-line-height-*. Upstream's names resolve to nothing here, so the inputs and preset rows would lose their sizing.

…mponents Upstream stories call useState inside story render callbacks, which the repo's react-hooks/rules-of-hooks rejects (a render callback is not a component). Extract each stateful render body into a named *WithState component; WithoutPrefix reuses DateComparisonDropdownWithState via a new removeCompareToPrefix prop instead of duplicating its body.

…ting Pure formatting, no content changes: prettier (line wrapping, arrow parens, paren spacing, scss quote style) plus eslint/stylelint autofix output (import order, import/first, scss blank-line and paren-spacing rules). The upstream external/internal dependency banner comments are dropped in the stories where the repo's import order interleaves the two groups.

@use

… port Parent-level wiring for the ui leaf (leaves are not pnpm workspace members, so the parent's dependencies are the load-bearing ones): - package.json: add the runtime deps the components import (@automattic/ui, @wordpress/components, @wordpress/compose, @wordpress/private-apis, clsx; move @wordpress/ui to dependencies) plus @wordpress/base-styles (dev) so the SCSS @use resolves at build - eslint.config.mjs: temporary packages/ui/** block softening JSDoc rules and react/jsx-no-bind so the upstream style lands as-is; tracked for follow-up alongside datetime/formatters - changelog entry

…to-analytics

retrofox · 2026-06-10T07:17:16Z

+@media not ( prefers-reduced-motion: reduce ) {
+
+	.date-comparison-dropdown__popover {
+		view-transition-name: next-admin--date-comparison-dropdown;


I think we should remove/replace these ids

Good call! Will do.

Renamed the next-admin-- view-transition ids to jp-premium-analytics-- across both SCSS files

good catch, and yup agreed!

…in prefix

…e-components-package-into-analytics # Conflicts: # projects/packages/premium-analytics/eslint.config.mjs

dognose24

Reviewed the full port (incl. the bf3248b7dc view-transition rename — nice catch, that fixes an upstream next-admin namespace leak the verbatim copy carried in). Port fidelity is clean: no stale @next-woo-analytics/@wc-analytics/admin-toolkit specifiers, all text domains correct, the DateRangePresets cast is well-justified, and the local unlock helper follows existing Jetpack precedent. Two non-blocking suggestions inline.

dognose24 · 2026-06-10T08:08:10Z

+		"@wordpress/components": "33.1.0",
+		"@wordpress/compose": "7.46.0",
+		"@wordpress/i18n": "^6.9.0",
+		"@wordpress/icons": "^13.0.0",
+		"@wordpress/private-apis": "1.46.0",


[suggestion] These three pins (@wordpress/components 33.1.0, @wordpress/compose 7.46.0, @wordpress/private-apis 1.46.0) are older than what the parent manifest resolves (35.0.0 / 8.1.0 / 1.48.0), and the sibling data leaf matches the parent exactly — so the PR description's "versions match siblings" doesn't hold for these.

No runtime impact today since the leaf isn't a pnpm workspace member, but when it becomes load-bearing in the first-consumer PR, pnpm would install a second, older @wordpress/components alongside the parent's. The private-apis skew is the riskiest one: its lock/unlock is version-coupled to @wordpress/components, so a mismatched pair can throw at runtime.

Suggest bumping the three specifiers to match the parent (35.0.0 / 8.1.0 / 1.48.0).

dognose24 · 2026-06-10T08:08:10Z

+	padding-bottom: var(--wpds-dimension-gap-sm);
+	width: calc(60 * var(--wpds-dimension-base));
+	padding-right: var(--wpds-dimension-padding-sm);


[suggestion] (low, fine to defer) A few physical-direction properties survived the verbatim copy (padding-bottom/padding-right here, padding-right in date-range-input.scss:10) in files that otherwise use logical properties (padding-block-start). RTL-incorrect, but since the cleanup follow-up is already tracked alongside the eslint relaxations, a logical-properties pass there would cover it — not blocking this PR.

chihsuan self-assigned this Jun 3, 2026

github-actions Bot added [Package] Premium Analytics [Status] In Progress Docs labels Jun 3, 2026

github-actions Bot added the [Status] Needs Author Reply We need more details from you. This label will be auto-added until the PR meets all requirements. label Jun 3, 2026

chihsuan changed the base branch from wooa7s-1320-configure-workspace-and-typescript-for-internal-packages to wooa7s-1318-base-datetime-formatters June 3, 2026 06:59

chihsuan mentioned this pull request Jun 5, 2026

feat(premium-analytics): port widgets-toolkit package from next-woocommerce-analytics #49422

Merged

chihsuan force-pushed the wooa7s-1318-integrate-components-package-into-analytics branch from 0885ed3 to 0472569 Compare June 5, 2026 07:18

chihsuan changed the base branch from wooa7s-1318-base-datetime-formatters to trunk June 5, 2026 07:18

github-actions Bot added [JS Package] Storybook RNA labels Jun 5, 2026

chihsuan added 9 commits June 5, 2026 16:57

feat(storybook): resolve @jetpack-premium-analytics imports in vite

ce8c516

chihsuan force-pushed the wooa7s-1318-integrate-components-package-into-analytics branch from c49c726 to ce8c516 Compare June 5, 2026 09:06

chihsuan changed the title ~~[WIP] feat(premium-analytics): port components package from next-woocommerce-analytics~~ feat(premium-analytics): port components package from next-woocommerce-analytics Jun 5, 2026

chihsuan marked this pull request as ready for review June 5, 2026 09:14

chihsuan requested review from a team, louwie17 and retrofox June 5, 2026 09:17

Merge branch 'trunk' into wooa7s-1318-integrate-components-package-in…

09d0ff3

…to-analytics

retrofox reviewed Jun 10, 2026

View reviewed changes

chihsuan added 2 commits June 10, 2026 16:35

refactor(premium-analytics): rename view-transition ids from next-adm…

bf3248b

…in prefix

Merge remote-tracking branch 'origin/trunk' into wooa7s-1318-integrat…

78de2dc

…e-components-package-into-analytics # Conflicts: # projects/packages/premium-analytics/eslint.config.mjs

chihsuan merged commit 7a8d3b8 into trunk Jun 10, 2026
121 of 122 checks passed

chihsuan deleted the wooa7s-1318-integrate-components-package-into-analytics branch June 10, 2026 08:07

dognose24 reviewed Jun 10, 2026

View reviewed changes

github-actions Bot removed [Status] In Progress [Status] Needs Author Reply We need more details from you. This label will be auto-added until the PR meets all requirements. labels Jun 10, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(premium-analytics): port components package from next-woocommerce-analytics#49360

feat(premium-analytics): port components package from next-woocommerce-analytics#49360
chihsuan merged 12 commits into
trunkfrom
wooa7s-1318-integrate-components-package-into-analytics

chihsuan commented Jun 3, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jun 3, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jun 3, 2026 •

edited

Loading

Uh oh!

jp-launch-control Bot commented Jun 3, 2026 •

edited

Loading

Uh oh!

retrofox Jun 10, 2026

Uh oh!

chihsuan Jun 10, 2026

Uh oh!

chihsuan Jun 10, 2026

Uh oh!

nerrad Jun 10, 2026

Uh oh!

Uh oh!

dognose24 left a comment

Uh oh!

dognose24 Jun 10, 2026

Uh oh!

dognose24 Jun 10, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

chihsuan commented Jun 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed changes

Commits

Monorepo adaptations

Build / SCSS

Storybook

What's intentionally not here

Does this pull request change what data or activity we track or use?

Testing instructions

Uh oh!

github-actions Bot commented Jun 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Jun 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jp-launch-control Bot commented Jun 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Coverage Summary

Uh oh!

retrofox Jun 10, 2026

Choose a reason for hiding this comment

Uh oh!

chihsuan Jun 10, 2026

Choose a reason for hiding this comment

Uh oh!

chihsuan Jun 10, 2026

Choose a reason for hiding this comment

Uh oh!

nerrad Jun 10, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

dognose24 left a comment

Choose a reason for hiding this comment

Uh oh!

dognose24 Jun 10, 2026

Choose a reason for hiding this comment

Uh oh!

dognose24 Jun 10, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

chihsuan commented Jun 3, 2026 •

edited

Loading

github-actions Bot commented Jun 3, 2026 •

edited

Loading

github-actions Bot commented Jun 3, 2026 •

edited

Loading

jp-launch-control Bot commented Jun 3, 2026 •

edited

Loading